@import 'src/res/theme/xxhz';



.meals-root {
  width: 100%;

  .head-bg {
    background: $color-default-background;
    position: sticky;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
  }

  .ticket-wrapper {
    padding: 20px;
    margin: 20px;
    background-color: #fff;
    border-radius: 15px;
  }

  .ticket-box-top {
    padding-top: 10px !important;
  }

  .at-search-bar {
    background: none;
    padding: 0;

    &:after {
      border: none;
    }
  }

  .at-search-bar__input-cnt {
    background: #fff;
  }

  .order-top {
    width: 670px;
    margin: 0 auto 25px;
    padding-top: 40px;

    .status {
      font-size: 34px;
      color: #fff;
    }

    .sms {
      color: #ffedd4;
      font-size: 24px;
      line-height: 2;
    }
  }


  .group-item {

    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
    line-height: 40px;
    font-size: 24px;
    color: $color-font-less;
    border-bottom: solid 15px #F8F8F8;

    .group-product {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28px;
      color: #333;

      text:first-child {
        width: 85%;
      }

      .group-num {
        font-size: 24px;
        color: $color-font-less;
      }
    }

    &:last-child {
      border-bottom: none;
    }
  ;
  }

  .content {
    width: 698px;
    margin: 15px auto 0;
    border-radius: 30px;
    background-color: white;
    box-sizing: border-box;
    padding: 30px;

    .group {
      height: 88px;
      overflow: hidden;
    }

    .group-title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      line-height: 40px;
      font-size: 26px;
      color: $color-font-less;
      border-bottom: solid 1Px #efefef;
    }

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      line-height: 40px;
      font-size: 26px;
      color: $color-font-less;
      border-bottom: solid 1Px #efefef;

      .text {
        max-width: 75%;
        word-break: break-all;
        line-height: 1.8;


      }
    }

    .item:last-child {
      border-bottom: none;
    }
  }

  .btn {
    width: calc(100% - 60px);
    margin: 30px auto;

    .item {
      margin-top: 30px;
    }
  }

  .qrimg {
    display: block;
    width: 128Px;
    height: 128Px;
    margin: 14PX 0;
  }

  .qrcodeimg {
    display: block;
    width: 150Px;
    height: 150Px;
    margin: 5Px 0 0;
  }

  .back-shop {
    background: #fff;
    width: 110px;
    height: 36px;
    font-size: 18px;
    color: #ff990f;
    border-radius: 18px;
    line-height: 36px;
    text-align: center;
    display: inline-block;
    margin-left: 15px;
    float: right;
    border: 1px solid #ff990f;
  }

  .ticket-box-well{
    margin-bottom: 20px;
  }

  .ticket-box-well:last-child{
    margin-bottom: 0 !important;
  }

  .ticket-box-well {
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    background: #fff;
    padding: 20px 25px;
    border-radius: 12px;

    .ticket-well-num {
      font-size: 28px;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .ticket-well-state {
      display: flex;
      justify-content: space-between;
      justify-items: center;
      font-size: 24px;
      color: #888888;
    }
  }

  .ticket-well-num-line {
    height: 1Px;
    margin: 6px 0 8px;
    background: linear-gradient(to right, #dbdbdb, #dbdbdb 5Px, transparent 5Px, transparent);
    background-size: 10Px 100%;
    width: 100%;
  }

  .ticket-box-well::before, .ticket-box-well::after {
    width: 30px;
    height: 30px;
    background-color: #f08d00;
    border-radius: 50%;
    content: ' ';
    z-index: 10;
    position: absolute;
  }

  .ticket-box-well::before {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }

  .ticket-box-well::after {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }

  .qr-code-image {
    .img {
      width: 40px;
      height: 40px;
    }
  }

  .ticket-meals {
    padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
  }

  .ticket-top-info {
    background: #f08d00;
    border-radius: 16px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px 20px 0;
  }

  .ticket-top-info-d {
    background: #c5c5c5;
    .ticket-box-well::before, .ticket-box-well::after{
      background: #c5c5c5 !important;
    }
  }

  .ticket_none {
    width: 710px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 310px;

    image, .taro-img {
      width: 78px;
      height: 82px
    }

    .text {
      font-size: 24px;
      color: #888;
      line-height: 80px;
    }
  }

  .groupTicket {
    width: 698px;
    margin: 0 auto 20px;
    background: #fff;
    overflow: hidden;
    border-radius: 16px;

    .groupTicket-tips {
      border-bottom: 1Px dashed #eee;
      font-size: 26px;
      line-height: 80px;
      text-align: center;
      color: #666;
    }

    .ticket-box-well {
      background: #fff;
      width: 638px;
      margin: 0 auto;
      border-bottom: 1Px dashed #eee;
      padding: 10px 0;
      height: 110px;

      .ticket-well-num {
        height: 60px;
        line-height: 60px;
        margin-bottom: 0px;

        .ticket-well-num-box {
          align-items: center;
        }

        image, .taro-img {
          width: 37px;
        }
      }
    }
  }

  .ticket-well-num-box {
    display: flex;
    justify-content: space-between;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    overflow: hidden;
    text-overflow: ellipsis;

    text, .taro-text {
      display: block;
      max-width: 80%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .qrbox {
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    padding: 0;

    .showbtn {
      position: absolute;
      left: 0;
      bottom: 0;
      font-size: 24px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      color: #ff990f;
      width: 100%;
      background: white;
    }

    .opacity {
      opacity: 0;
      visibility: hidden;
    }
  }

  .ticket-box {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 30px 0;
  }

  .ticket-zhan {
    height: 28px;
    width: 100%;
  }

  .ticket-tabs {
    width: 100%;
    display: flex;
    justify-content: space-around;
    height: 82px;
    margin-bottom: 20px;

    .ticket-tabs_item {
      line-height: 76px;
      color: #fff;
    }

    .ticket-tabs_item.on:after {
      content: "";
      display: block;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: #fff;
    }
  }

  .ticket-num, .ticket-state {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    font-size: 24px;
    color: #666;

    .ticket-num-title {
      width: 150px;
    }

    .num {
      font-size: 34px;
      color: #858585;
      line-height: 34px;
      word-wrap: break-word;
      width: 480px;

      image, .taro-img {
        max-width: 100%;
      }

      text, .taro-text {
        display: inline-block;
        width: 98px;
        height: 34px;
        border-radius: 17px;
        text-align: center;
        line-height: 34px;
        color: #858585;
        font-size: 18px;
        background: #f7f7f7;
        vertical-align: middle;
        margin-right: 15px;
      }
    }

    .num-img {
      width: 98px;
    }

    .state {
      padding: 20px 0;
      font-size: 24px;
    }
  }

  .ticket-info {
    box-sizing: border-box;
    font-size: 24px;
    color: #666;
    background-color: white;

    .info-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      box-sizing: border-box;

      text, .taro-text {
        padding-left: 30px;
      }
    }
  }

  .back-index {
    width: 100%;
    padding: 40px;
    margin-top: 20px;
    box-sizing: border-box;
    background-color: white;
  }

  .at-tabs__header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 11;
  }

  .at-tabs__body {
    padding-top: 86px;
  }

  .log {
    width: 698px;
    margin: 0 auto 15px;
    border-radius: 20px;
    background-color: white;
    box-sizing: border-box;
    padding: 10px 30px;

    .log-title {
      padding: 40px 0 25px;
      font-size: 30px;
      color: #333;
    }

    .log-item {
      padding-bottom: 30px;
      font-size: 28px;
      color: #333;
      line-height: 1;

      text, .taro-text {
        float: right;
      }

      .group-product {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28px;
        padding: 15px 0;
        color: #666;
      }

      .group-company {
        font-size: 24px;
        color: #666;
      }
    }
  }

  .onle-ticket {
    width: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;

    .onle-ticket-img {
      width: 145px;
      height: 145px;
      border-radius: 50%;
      position: absolute;
      left: 450px;
      top: 45px;
      background: #fff;

      image, .taro-img {
        height: 100%;
        width: 100%;
      }
    }
  }

  .filter {
    filter: saturate(0%);
    opacity: 0.5;
  }

  .t_ticket {
    padding: 0 15px;
    height: 66px;
    border-radius: 8px;
    background: #ddd;
    color: #333;
    line-height: 66px;
    text-align: center;
    margin: 110px auto 0;
    display: inline-block;
  }

  .t_ticket_import {
    padding: 0 15px;
    height: 66px;
    color: #f58240;
    line-height: 66px;
    text-align: center;
    margin: 110px auto 0;
    display: inline-block;
  }

  .t_ticket_import_3 {
    width: 500px;
    height: 66px;
    color: #f58240;
    line-height: 66px;
    text-align: center;
    margin: 110px auto 0;
  }

  .code-box, .code-shuoming {
    display: flex;
    justify-content: space-around;
  }

  .code-shuoming {
    font-size: 24px;
    color: #666;
  }

  .back-pay {
    float: right;

    .text {
      height: 100%;
      line-height: 60px;
      display: inline-block;
      font-size: 24px;
      color: #f58240;
      vertical-align: middle
    }
  }

  .public_code_tips {
    width: 650px;
    border-top: 1px solid #eee;
    margin: 20px auto 0;
    padding-top: 20px;
    font-size: 20px;
    color: #888;
    text-align: center;
  }

  .show_code {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 55;
    display: flex;
    justify-content: center;
    align-items: center;

    .show_code_bj {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }

    .show_code_content {
      width: 503px;
      background: #fff;
      border-radius: 20px;
      position: relative;
      padding-bottom: 40px;
      z-index: 2;

      .close {
        width: 68px;
        height: 97px;
        position: absolute;
        bottom: -97px;
        left: 217px;
      }

      .show_code_title {
        text-align: center;
        font-size: 26px;
        padding-top: 20px;
      }
    }

    .show_code_box {
      width: 503px;
      height: 503px;
      display: flex;
      margin: 0 auto;
      padding: 45px 0 15px;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;

      .ticketWxCode {
        width: 120Px;
        height: 120Px;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      .ticketCode {
        width: 120Px;
        height: 120Px;

        .img {
          width: 90%;
          height: 90%;
          margin: 5%;
        }
      }
    }

    .show_code_tips {
      width: 425px;
      margin: 0 auto;
      text-align: center;

      .show_code_ticket {
        font-size: 24px;
      }

      .show_code_title {
        font-size: 24px;
        color: #f69f46;
        line-height: 60px;
      }

      .show_code_desc {
        font-size: 20px;
        color: #888888;
        line-height: 33px;
      }
    }
  }

  .order-info {
    display: flex;
    justify-content: space-between;

    .img {
      width: 162px;
      height: 156px;
      border-radius: 10px;
    }

    .name-box {
      width: 420px;
      box-sizing: border-box;

      .name {
        font-size: 28px;
        line-height: 40px;
        color: #333;
        display: -webkit-box;
        /*! autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-weight: bold;
      }

      .date, .valid-date {
        font-size: 22px;
        line-height: 40px;
        color: #b0b0b0;
      }
    }

    .order-info-right {
      width: 54px;
      height: 125px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;

      .order-info-num {
        font-size: 22px;
        line-height: 40px;
        color: #b0b0b0;
      }

      .order-info-from {
        width: 42px;
        height: 42px;
      }
    }
  }

  .good_meals_box {
    width: 710px;
    border-radius: 15px;
    overflow: hidden;
    margin: 0 auto 10px;
    background: #fff;

    .meals-good {
      width: 100%;
      box-sizing: border-box;
      padding: 30px 30px 0;
      background-color: white;
    }

    .good-item {
      width: 100%;
      height: 64px;
      line-height: 64px;
      border-radius: 10px;
      padding: 0px 30px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: none;
      margin-bottom: 0;

      .title {
        font-size: 28px;
        color: #333;
      }
    }

    .good-item:last-child {
      margin-bottom: 0;
    }

    .Mtitle {
      font-size: 30px;
      color: #333333;
      padding-bottom: 16px;

      .other-good-more {
        font-size: 24px;
        line-height: 28px;
        color: #f08d00;
        float: right;
        display: flex;
        align-items: center;
        justify-content: space-between;

        text, .taro-text {
          width: 116px;
          height: 40px;
          display: block;
          line-height: 40px;
          text-align: center;
          border-radius: 20px;
          color: #fff;
          background: #eb5a15;
          font-size: 26px;
          margin-left: 20px;
        }
      }
    }

    .price {
      font-size: 26px;
      flex-shrink: 0;
      color: #888;
    }
  }

  .good_meals_more {
    font-size: 28px;
    color: #eb5a15;
    background: #fff;
    text-align: center;
    line-height: 80px;
    border-top: 1Px solid #f0f0f0;
  }

}
